<template>
  <div class="progress">
    <div class="progress-line"></div>
  </div>
</template>

<script>
export default {
  name: "invented-progress",
  props: ['detail'],
  data () {
    return {
    }
  },
  methods: {},
  created () {}
}
</script>

<style scoped>
.progress {
  height: 6px;
  width: 100%px;
  border-radius: 100px;
  background: #ebeef5;
  position: relative;
  overflow: hidden;
}
.progress-line {
  background: #409eff;
  position: absolute;
  width: 50%;
  transform: translateZ(0);
  left: 0;
  top: 0;
  height: 100%;
  text-align: right;
  border-radius: 100px;
  transition: width .6s ease;
  animation: indeterminate 3s infinite;
}
@keyframes indeterminate {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}
</style>